<!-- 添加会议 -->
<template>
  <app-page card full>
    <template #header>{{ $route.query.id ? '编辑会议' : '新增会议' }}</template>
    <el-form
      ref="pageForm"
      :model="pageData.detail"
      label-width="90px"
      @submit.prevent="pageActions.handleSubmit()"
    >
      <jax-info title="基本信息">
        <jax-form-group
          :json="formJson"
          v-model="pageData.detail"
          :style="'max-width:460px'"
        />
      </jax-info>
      <jax-info title="会议主题">
        <el-form-item prop="content" labelWidth="0">
          <WangEditor v-model="pageData.detail.content" />
        </el-form-item>
      </jax-info>
    </el-form>
    <template #footer>
      <div class="app-toolbar">
        <el-button type="default" @click="pageActions.handleCancel()">返回</el-button>
        <el-button type="primary" @click="pageActions.handleSubmit()">保存</el-button>
      </div>
    </template>
  </app-page>
</template>

<script setup>
import { usePageEdit, http } from 'jax-node'
import WangEditor from '@/components/WangEditor.vue'

const { pageData, pageActions, pageForm } = usePageEdit()

const roomList = ref([])
http.get('/meet/room', {
  params: {
    pageSize: -1,
    isOpen: true
  }
}).then(res => {
  roomList.value = res.map(item => {
    return {
      ...item,
      label: item.roomName,
      value: item.id
    }
  })
})

const formJson = computed(() => {
  const required = true
  const widthFull = 'width: 100%;'

  return [
    { name: 'meetName', label: '会议名称', required, placeholder: '请输入' },
    { name: 'roomId', label: '会议地点', required, type: 'select', options: roomList.value },
    {
      name: 'startTime',
      label: '会议开始时间',
      required,
      type: 'datetime',
      labelWidth: '110',
      placeholder: '请选择',
      inputAttr: { style: widthFull },
    },
    {
      name: 'endTime',
      label: '会议结束时间',
      required,
      type: 'datetime',
      labelWidth: '110',
      placeholder: '请选择',
      inputAttr: { style: widthFull },
    },
  ]
})
</script>
